<template>
  <view class="time-range-container">
    <view class="section-title">时间段设置</view>
    
    <!-- 时间段列表 -->
    <view class="time-list">
      <view 
        class="time-item" 
        v-for="(range, index) in timeRanges" 
        :key="index"
      >
        <!-- 开始时间选择 -->
        <view class="time-picker-item">
          <text class="picker-label">开始时间</text>
          <picker 
            mode="time"
            :value="range.startTime"
            start="00:00"
            end="23:59"
            @change="(e) => handleTimeChange(index, 'start', e)"
            class="time-picker"
          >
            <view class="picker-display">{{ range.startTime || '选择时间' }}</view>
          </picker>
        </view>
        
        <!-- 分隔符 -->
        <view class="time-separator">-</view>
        
        <!-- 结束时间选择 -->
        <view class="time-picker-item">
          <text class="picker-label">结束时间</text>
          <picker 
            mode="time"
            :value="range.endTime"
            :start="getMinEndTime(index)"
            end="23:59"
            @change="(e) => handleTimeChange(index, 'end', e)"
            class="time-picker"
          >
            <view class="picker-display">{{ range.endTime || '选择时间' }}</view>
          </picker>
        </view>
        
        <!-- 删除按钮 -->
        <view 
          class="delete-btn" 
          v-if="timeRanges.length > 1"
          @click="removeTimeRange(index)"
        >
          <text class="iconfont icon-delete"></text>
        </view>
      </view>
    </view>
    
    <!-- 添加按钮 -->
    <view class="add-btn" @click="addTimeRange">
      <text class="iconfont icon-add"></text>
      <text>添加时间段</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 时间段数组，存储多个开始/结束时间
      timeRanges: [
        { startTime: '', endTime: '' }
      ]
    };
  },
  methods: {
    // 添加新的时间段
    addTimeRange() {
      this.timeRanges.push({ startTime: '', endTime: '' });
    },
    
    // 删除时间段
    removeTimeRange(index) {
      this.timeRanges.splice(index, 1);
    },
    
    // 处理时间选择变化
    handleTimeChange(index, type, e) {
      const time = e.detail.value;
      this.$set(this.timeRanges[index], type === 'start' ? 'startTime' : 'endTime', time);
      
      // 自动校验：如果结束时间早于开始时间，清空结束时间
      const range = this.timeRanges[index];
      if (range.startTime && range.endTime && range.endTime <= range.startTime) {
        this.$set(this.timeRanges[index], 'endTime', '');
        uni.showToast({
          title: '结束时间不能早于开始时间',
          icon: 'none'
        });
      }
    },
    
    // 获取结束时间的最小可选值（不能早于开始时间）
    getMinEndTime(index) {
      return this.timeRanges[index].startTime || '00:00';
    },
    
    // 获取所有时间段（用于表单提交）
    getTimeRangeValues() {
      return this.timeRanges
        .filter(range => range.startTime && range.endTime)
        .map(range => `${range.startTime}-${range.endTime}`);
    }
  }
};
</script>

<style scoped>
.time-range-container {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin: 10rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
}

.time-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.time-item {
  display: flex;
  align-items: center;
  padding: 15rpx;
  background-color: #f9fafb;
  border-radius: 8rpx;
}

.time-picker-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5rpx;
}

.picker-label {
  font-size: 22rpx;
  color: #666;
  padding-left: 5rpx;
}

.time-picker {
  width: 100%;
}

.picker-display {
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 15rpx;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 6rpx;
  font-size: 26rpx;
  color: #333;
}

.time-separator {
  margin: 0 15rpx;
  font-size: 28rpx;
  color: #999;
  font-weight: 500;
}

.delete-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 30rpx;
  margin-left: 10rpx;
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  height: 50rpx;
  margin-top: 15rpx;
  background-color: #ffffff;
  color: royalblue;
  font-size: 26rpx;
  border-radius: 18rpx;
  border: 1px dashed #07c160;
}

.add-btn .icon-add {
  font-size: 20rpx;
}
</style>
